@layer components {
  .success-color-group {
    @apply text-@success-color hover:text-@success-color-hover active:text-@success-color-active disabled:text-@success-color-disabled;
  }

  .brand-color-group {
    @apply text-@brand-color hover:text-@brand-color-hover active:text-@brand-color-active disabled:text-@brand-color-disabled;
  }

  .warning-color-group {
    @apply text-@warning-color hover:text-@warning-color-hover active:text-@warning-color-active disabled:text-@warning-color-disabled;
  }

  .error-color-group {
    @apply text-@error-color hover:text-@error-color-hover active:text-@error-color-active disabled:text-@error-color-disabled;
  }

  /* .cn-12{
    @apply text-xs leading-5 font-normal
  }

  .cn-14{
    @apply text-sm leading-[22px] font-normal
  }

  .cn-16{
    @apply text-base leading-6 font-normal
  }

  .cn-20{
    @apply text-xl leading-7 font-normal
  }

  .cn-12-blod{
    @apply text-xs leading-5 font-semibold
  }

  .cn-14-blod{
    @apply text-sm leading-[22px] font-semibold
  }

  .cn-16-blod{
    @apply text-base font-semibold
  }

  .cn-20-blod{
    @apply text-base font-bold
  } */
}
